<template>
	<view class="container">
		<!-- 导航 -->
		<uni-nav-bar left-icon="left" statusBar	:backgroundColor="'rgba(255,255,255,0)'" :border="false" fixed @clickLeft="back"></uni-nav-bar>
		<view class="map">
			<map 
				:latitude="vdata.latitude"
				:longitude="vdata.longitude"
				:markers="vdata.markers"
				:enable-building="true"
				:circles="vdata.circles"
			>
				<cover-view slot="callout">
					<template v-for="item in vdata.markers">
						<cover-view class="custom-callout-text" :marker-id="item.id">
							{{ item.name }}
						</cover-view>
					</template>
				</cover-view>
			</map>
		</view>
		
		<!-- 商户列表 -->
		<view class="content-wrap">
			<view class="adress">
				<view class="left">
					<image src="@/static/new/businessCircle/location2.png"></image>
					<view>{{ vdata.currentLocation }}</view>
				</view>
				<!-- <view class="right">
					<text>其他地址</text>
					<image src="@/static/new/arrow-right.png"></image>
				</view> -->
			</view>
			<!-- 激活网点列表 -->
			<view v-if="vdata.activate" class="group-list">
				<view class="group-item" v-for="item in useActiveDataResult.dataList">
					<view class="left">
						<image :src="'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f16e17c6-612d-4b3f-ad4f-86325fff08e3.png'"></image>
						<view class="desc">
							<view class="tle">{{ item.agentName }}</view>
							<view class="dis1" @click="linkPhone(item.linkPhone)">电话：
								<span class="text">{{ item.linkPhone }}</span>
							</view>
							<view class="dis">距您{{ tool.filterDistance(item.distance) }}</view>
							<view class="addr">
								<image src="@/static/new/businessCircle/location.png"></image>
								<text class="text">{{ item.address }}</text>
							</view>
						</view>
					</view>
					<view class="right">
						<image v-if="!item.location.latitude || !item.location.longitude" @tap="navigation(item)" class="nav" src="@/static/new/businessCircle/no-nav.png"></image>
						<image v-else @tap="navigation(item)" class="nav" src="@/static/new/businessCircle/nav.png"></image>
					</view>
				</view>
				<view class="list-tip-text" v-if="useActiveDataResult.dataList.length != 0">{{ useActiveDataResult.listTipText }}</view>
				<gzListNull :list="useActiveDataResult.dataList"></gzListNull>
			</view>
			<!-- 核销商家列表 -->
			<view v-else class="group-list">
				<view class="group-item" v-for="item in useDataResult.dataList">
					<view class="left">
						<image v-if="item.mchListImage" :src="item.mchListImage"></image>
						<template v-else-if="item.mcc && item.mcc instanceof Array && item.mcc.length > 1">
							<image v-if="item.mcc[0] == 1" src="@/static/svg/mch-default-img1.svg"></image>
							<image v-else-if="item.mcc[0] == 2" src="@/static/svg/mch-default-img2.svg"></image>
							<image v-else-if="item.mcc[0] == 3" src="@/static/svg/mch-default-img3.svg"></image>
							<image v-else-if="item.mcc[0] == 4" src="@/static/svg/mch-default-img4.svg"></image>
							<image v-else-if="item.mcc[0] == 5" src="@/static/svg/mch-default-img5.svg"></image>
							<image v-else src="@/static/svg/mch-default-img1.svg"></image>
						</template>
						<image v-else src="@/static/svg/mch-default-img1.svg"></image>
						<view class="desc">
							<view class="tle">{{ item.mchName }}</view>
							<view class="dis">{{ tool.filterDistance(item.distance) }}</view>
							<view class="addr">
								<image src="@/static/new/businessCircle/location.png"></image>
								<text class="text">{{ item.address }}</text>
							</view>
						</view>
					</view>
					<view class="right">
						<view v-if="item.orderSort === 1" class="top-tag">优选</view>
						<view v-else></view>
						<image v-if="!item.location || !item.location.latitude || !item.location.longitude || item.location.latitude == 'undefined' || item.location.longitude == 'undefined'" @tap="navigation(item)" class="nav" src="@/static/new/businessCircle/no-nav.png"></image>
						<image v-else @tap="navigation(item)" class="nav" src="@/static/new/businessCircle/nav.png"></image>
					</view>
				</view>
				<view class="list-tip-text" v-if="useDataResult.dataList.length != 0">{{ useDataResult.listTipText }}</view>
				<gzListNull :list="useDataResult.dataList"></gzListNull>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { $couponMchList, $agentDestroyList } from '@/http/apiManager.js'
	import { onPageScroll, onShow, onLoad } from '@dcloudio/uni-app'
	import useGetList from '@/hooks/useGetList.js'
	import { ref, reactive, watch, getCurrentInstance } from 'vue'
	import tool from '@/util/tool.js'
	import getLocation from '@/util/location.js'	// 授权 拉取定位信息 异步函数 返回 经纬度和地址信息
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const { useDataResult, getList } = useGetList($couponMchList,data=>{
		mapHandle(data)
		return data.filter(item => {
			if(item){
				if(item.mcc){
					return { ...item, mcc: JSON.parse(item.mcc) }
				}else{
					return { ...item, mcc: [0]}
				}
			}
		})
	},{  },false,20)	// 核销
	// 激活网点列表
	const { useDataResult : useActiveDataResult, getList : getActiveList } = useGetList($agentDestroyList,data=>{
		mapHandle(data)
		return data
	},{  },false)
	
	// 数据源
	const vdata = reactive({
		currentLocation: '',
		couponId: 20, // 奖品id
		agentList: [],	// 网点列表
		latitude: 34.7466287061769,
		longitude: 113.62536678210733,
		circles: [],
		markers: [{
			id:0,
			latitude: 34.7466287061769,
			longitude: 113.62536678210733,
		}]
	})
	// 导航栏透明度
	const opacity = ref(0)
	onLoad(async ({ couponId, activate }) => {
		vdata.couponId = couponId
		if(activate){
			vdata.activate = true
		}else{
			vdata.activate = false
		}
		const { longitude, latitude, address } = await getLocation()
		vdata.currentLocation = address
		vdata.longitude = longitude
		vdata.latitude = latitude
		// 标记自己的位置
		vdata.markers[0].latitude = latitude
		vdata.markers[0].longitude = longitude
		getAgentList(latitude,longitude)
	})
	/**
	 * 返回上一级
	 */
	function back(){
		uni.navigateBack()
	}
	/**
	 * 网点列表
	 */
	async function getAgentList(latitude,longitude,couponId = vdata.couponId){
		if(vdata.activate){ // 激活
			await getActiveList({ location: { latitude, longitude }, couponId })
		}else{
			await getList({ location: { latitude, longitude }, couponId })
		}
	}
	
	// 拨打电话
	function linkPhone(phone){
		uni.makePhoneCall({
			phoneNumber: phone //仅为示例
		});
	}
	
	/**
	 * 根据接口返回网点列表 向地图中添加网点标记
	 */
	let currentPage = ref(1)
	const mapHandle = (newData) => {
		const tempMarkers = []
		newData.forEach((item,index) => {
			if(item){
				const { latitude, longitude } = item.location
				tempMarkers.push({
					id: currentPage.value * 10 + index,
					width: 20,
					height: 20,
					iconPath: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/218fcab8-a114-4283-9e09-7f046463466d.png',
					latitude,
					longitude,
					customCallout: {
						display: 'ALWAYS',
						anchorY: -5
					},
					name: vdata.activate ? item.agentName : item.mchName
				})
			}
		})
		vdata.markers = vdata.markers.concat(tempMarkers)
		currentPage.value ++
	}

	/**
	 * 导航到网点
	 */
	function navigation(item){
		const { latitude, longitude } = item.location
		const locationOptions = {
			latitude,
			longitude,
			name: vdata.activate ? item.agentName : item.mchName,
			address: item.address
		}
		if(!locationOptions.latitude || !locationOptions.longitude){
			// #ifdef MP-YHDD
			const title = vdata.activate ? '网点GPS数据缺失，无法导航！' : '商户GPS数据缺失，无法导航！'
			// #endif
			// #ifndef MP-YHDD
			const title = vdata.activate ? '网点GPS数据缺失，无法导航！' : '非小邮付商户，暂无GPS数据！'
			// #endif
			$infoBox.toast(title)
			return
		}
		uni.openLocation(locationOptions);	
	}
</script>

<style lang="less">
	@page-backgroud: #FAFAFD; //页面背景色
	.container{
		width: 100%;
		min-height: 100vh;
		background-color: @page-backgroud;
	}
	
	.map{
		width: 100%;
		height: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		map{
			width: 100%;
			height: 100%;
		}
		.custom-callout-text{
			display: inline-flex;
			justify-content: center;
			align-items: center;
			min-width: 20rpx;
			background: #24c789;
			color: #fff;
			padding: 5rpx 10rpx;
			font-size: 28rpx;
			border-radius: 6rpx;
		}
	}
	
	.content-wrap{
		padding: 34rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background-color: #F7F8FB;
		position: relative;
		// top: -35rpx;
		margin-top: 580rpx;
		
		.adress{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				width: 100%;
				display: flex;
				align-items: center;
					
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
					flex-shrink: 0;
				}
					
				view {
					width: calc(100% - 45rpx);
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					white-space: nowrap; /* 禁止文本换行 */
					overflow: hidden; /* 隐藏超出范围的内容 */
					text-overflow: ellipsis; /* 使用省略号 */
				}
			}
			.right{
				display: flex;
				align-items: center;
				text{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				image{
					width: 12rpx;
					height: 20rpx;
					margin-left: 12rpx;
				}
			}
		}
		.group-list{
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			margin-top: 30rpx;
			
			.group-item{
				padding: 24rpx;
				background-color: #fff;
				border-radius: 24rpx;
				display: flex;
				
				.left{
					display: flex;
					image{
						width: 146rpx;
						height: 146rpx;
						margin-right: 18rpx;
						flex-shrink: 0;
						border-radius: 15rpx;
					}
					.desc{
						width: 390rpx;
						display: flex;
						flex-direction: column;
						gap: 25rpx;
						.tle{
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.dis{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
						.dis1{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							.text{
								color:#24C789;
							}
						}
						.addr{
							display: flex;
							align-items: center;
							image{
								width: 24rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
							.text{
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					margin-left: 24rpx;
					flex-shrink: 0;
					
					.top-tag{
						background: #080808;
						color: #e3b087;
						padding: 5rpx 10rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
					}
					
					.nav{
						width: 60rpx;
						height: 60rpx;
					}
				}
			}
		}
	}
</style>